<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		   div{
		   	width:500px;
		   	height:200px;
		   	margin:30px auto;
		   	border:5px black solid;
		   	text-align:center;
		   	line-height:200px;
		   	background:#ccc;
		   	color:#fff;
		   	box-shadow:10px 10px 10px #ccc;
		   	border-radius:50px;
		   }
	</style>
	<script>
		window.onload=function(){
			setInterval(function(){
		    var date = new Date();
		    var year=date.getFullYear();
		    var month=date.getMonth()+1;
		    var day=date.getDate();
		    var week=date.getDay();
		    var hours=date.getHours();
		    var min=date.getMinutes();
		    var sec=date.getSeconds();
		    switch(week){
		    	case 0:
		    	week='天';
		    	break;
		        case 1:
		    	week='一';
		    	break;
		    	case 2:
		    	week='二';
		    	break;
		    	case 3:
		    	week='三';
		    	break;
		        case 4:
		    	week='四';
		    	break;
		        case 5:
		    	week='五';
		    	break;
		    	case 6:
		    	week='六';
		    	break;
		    }
		    var str='这是第'+year+'年'+month+'月'+day+'日，星期'+week+' '+getOne(hours)+':'+getTwo(min)+':'+getTwo(sec);
		    document.getElementById('box').innerText = str;
         },1000);
			function getTwo(num){
              return num<10? "0"+num:num+"";
			}
			function getOne(num){
              if(num<12){
              return "上午"+num;
              }else{
              return "下午"+(num-12);
              }
			}
		}
	</script>
</head>
<body>
	  <div id="box"></div>	  
</body>
</html>